<!DOCTYPE html>
<html>
	<head>
		<title>CSS Regions: resizing region with percentage size inside a container that also has percentage size</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-into">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
		<meta name="flags" content="dom ahem http">
		<meta name="assert" content="Test checks that resizing the viewport of a page containing a region
				that has a percentage size relative to a percentage-sized parent correctly relayouts
				the region's contents.">
		<link rel="match" href="reference/regions-resizing-001-ref.html">
		<!-- The <script type="text/css"> below is just a textual container for styles that will be
		injected in the iframe at load time.-->
		<script id="test-styles" type="text/css">
		html, body {
			height: 100%;
		}
		#region-parent {
			width: 50%;
			height: 100%;
		}
		#region {
			width: 50%;
			height: 50%;
		}
		</script>
		<script src="support/util.js" type="text/javascript"></script>
		<script type="text/javascript">
		window.addEventListener("load", function() {
			injectStylesInIFrame("#test-styles", "iframe");
			resizeViewportTo("iframe", 320, 320);
		})
		</script>
	</head>
	<body>
		<p>Test passes if you see a green square below and no red.</p>
		<p>The test also fails if the there's a green block that is <strong>not</strong> a square (e.g. rectangle or polygon).</p>
		<iframe src="support/region-in-container.html" frameborder="0" width="500" height="400"></iframe>
	</body>
</html>